<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>07-定位叠放次序</title>
  <style>
    div {
      width: 200px;
      height: 300px;
    }

    .box {
      /* 1. 如果元素都添加了绝对定位，默认等级为auto，最后一个添加的元素在上面 */
      /* 2. */
      position: absolute;
    }

    .mao1 {
      background-color: red;
      left: 10px;
      top: 20px;
      /* 1. 默认数值为auto */
      /* 2. 数值越大盒子等级越高 */
      /* 3. 数字后面不能加单位 */
      /* 4. 只有定位盒子才有z-index属性 */
      z-index: 1;
    }

    .mao2 {
      background-color: green;
      left: 20px;
      top: 30px;
    }

    .mao3 {
      background-color: blue;
    }
  </style>

</head>

<body>

  <div class="mao1 box">1毛</div>
  <div class="mao2 box">2毛</div>
  <div class="mao3 box">3毛</div>

</body>

</html>